<template>
  <!-- 根据传入的参数，展示对应的组件 TextEdit LookUpEdit DateEdit DateTimeEdit CheckEdit RadioGroup ButtonEdit -->
  <div class="card-item-container">
    <a-input
      v-model="v.value"
      v-if="v.type === 'TextEdit'"
      :disabled="v.disabled"
      :style="`width: ${v.w || 200}px`">
    </a-input>
    <a-select
      show-search
      v-model="v.value"
      :disabled="v.disabled"
      v-if="v.type === 'LookUpEdit'"
      :style="`width: ${v.w || 200}px`"
      :filter-option="filterOption">
      <a-select-option
        :key="index"
        :value="item.value"
        v-for="(item, index) in v.list">
        {{ item.label }}
      </a-select-option>
    </a-select>
    <a-checkbox
      :disabled="v.disabled"
      v-if="v.type === 'CheckEdit'"
      v-model="v.value">
      {{ v.label }}
    </a-checkbox>
    <template v-if="v.type === 'ButtonEdit'">
      <div class="button-deit-container">
        <a-input
          :disabled="v.disabled"
          v-model="v.value"
          readonly
          :style="`width: ${v.w || 200}px`">
        </a-input>
        <a-button @click="showModal(v.modalType, source, v.id, stateName)">...</a-button>
      </div>
    </template>
    <a-radio-group
      :disabled="v.disabled"
      v-if="v.type === 'RadioGroup'"
      v-model="v.value">
      <a-radio v-for="(item, index) in v.list" :key="index" :value="item.value">
        {{ item.label }}
      </a-radio>
    </a-radio-group>
  </div>
</template>
<script>
import { debounce } from '@/libs/js/common'
import { mapMutations } from 'vuex'
export default {
  props: {
    value: {
      type: String | Number | Object | Array | Boolean,
      default: null
    },
    source: {
      type: String,
      default: ''
    },
    stateName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      v: null
    }
  },
  model: {
    prop: 'value',
    event: 'revert'
  },
  methods: {
    ...mapMutations(['changememoModal', 'changeShopModal']),
    // 展示弹窗控制
    showModal (type, source, id, name) {
      if (type === 'memo') {
        this.changememoModal({source, id, name})
      }
      if (type === 'shop') {
        this.changeShopModal({source, id, name})
      }
    },
    revert (value) {
      debounce(this.$emit('revert', value), 1000)
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    }
  },
  watch: {
    v: {
      handler: function (n) {
        this.revert(n)
      }
    },
    deep: true
  },
  created () {
    this.v = this.value
  }
}
</script>
<style lang="scss" scoped>
.card-item-container {
  display: inline-block;
}
</style>
